import { T_srv, Tsrv, ifs, ts, tvs, vue } from '@/services';
import { Graph, Node, Shape } from '@antv/x6';
import { I_cmd, T_cmd } from './command';
import { N_cPflow } from './types';
// 默认节点配置
const defaultNodeConfig: N_cPflow.NodeConfig = {
  width: 150,
  height: 80,
  padding: 20,
  rowSpacing: 50,
  columnSpacing: 50
};

// // 预设节点配置
// const presetNodes: N_cPflow.PresetNode[] = [
//   {
//     id: 'preset1',
//     name: '清洗工序',
//     data: {
//       sequence: 0, // 实际序号会在添加时计算
//       processCode: 'CLEAN',
//       processName: '清洗工序',
//       tankData: [{ tankName: '清洗槽', tankNumber: 'T001' }],
//       paramData: [
//         { paramName: '温度', paramValue: '60℃' },
//         { paramName: '时间', paramValue: '30min' }
//       ]
//     }
//   },
//   {
//     id: 'preset2',
//     name: '电镀工序',
//     data: {
//       sequence: 0,
//       processCode: 'PLATE',
//       processName: '电镀工序',
//       tankData: [{ tankName: '电镀槽', tankNumber: 'T002' }],
//       paramData: [
//         { paramName: '电流', paramValue: '10A' },
//         { paramName: '时间', paramValue: '45min' }
//       ]
//     }
//   }
// ];

// 定义节点配置
const config = {
  width: 150,
  height: 80,
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'text',
      selector: 'sequence'
    },
    {
      tagName: 'text',
      selector: 'processName'
    },
    {
      tagName: 'text',
      selector: 'processCode'
    },
    {
      tagName: 'foreignObject',
      selector: 'tankIcon',
      attrs: {
        width: 20,
        height: 20,
        class: 'tank-icon'
      }
    },
    {
      tagName: 'foreignObject',
      selector: 'paramIcon',
      attrs: {
        width: 20,
        height: 20,
        class: 'param-icon'
      }
    }
  ],
  attrs: {
    body: {
      fill: '#fff',
      stroke: '#1890ff',
      strokeWidth: 1,
      rx: 4,
      ry: 4
    },
    sequence: {
      ref: 'body',
      refX: 10,
      refY: 10,
      fontSize: 12,
      fill: '#666'
    },
    processName: {
      ref: 'body',
      refX: 10,
      refY: 30,
      fontSize: 14,
      fill: '#333'
    },
    processCode: {
      ref: 'body',
      refX: 10,
      refY: 50,
      fontSize: 12,
      fill: '#666'
    },
    tankIcon: {
      ref: 'body',
      refX: '100%',
      refX2: -50,
      refY: 10,
      html:
        '<i class="ivu-icon ivu-icon-md-cube" style="font-size: 16px; color: #1890ff;"></i>'
    },
    paramIcon: {
      ref: 'body',
      refX: '100%',
      refX2: -25,
      refY: 10,
      html:
        '<i class="ivu-icon ivu-icon-md-settings" style="font-size: 16px; color: #1890ff;"></i>'
    }
  },
  ports: {
    groups: {
      in: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#1890ff',
            fill: '#fff',
            strokeWidth: 1
          }
        }
      },
      out: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#1890ff',
            fill: '#fff',
            strokeWidth: 1
          }
        }
      }
    },
    items: [
      { group: 'in', id: 'in' },
      { group: 'out', id: 'out' }
    ]
  }
};

// 创建自定义节点
class CustomNode extends Shape.Rect {
  constructor(options: any) {
    super({
      ...config,
      ...options
    });
  }

  public updData(data: N_cPflow.ProcessNodeData): void {
    const { sequence, processCode, processName } = data;
    this.attr({
      sequence: {
        text: `#${sequence}`
      },
      processName: {
        text: processName || '未命名工序'
      },
      processCode: {
        text: processCode || '无编号'
      }
    });
  }
}
type ContextMenu = N_cPflow.ContextMenu;
type NodeConfig = N_cPflow.NodeConfig;
type ProcessDialog = N_cPflow.ProcessDialog;
type TooltipData = N_cPflow.TooltipData;
type NodeParamsInfo = N_cPflow.NodeParamsInfo;
type ProcessNodeData = N_cPflow.ProcessNodeData;
type TankData = N_cPflow.TankData;
type ParamData = N_cPflow.ParamData;
export {
  ContextMenu,
  CustomNode,
  Graph,
  I_cmd,
  N_cPflow,
  Node,
  NodeConfig,
  NodeParamsInfo,
  ParamData,
  ProcessDialog,
  ProcessNodeData,
  T_cmd,
  T_srv,
  TankData,
  TooltipData,
  Tsrv,
  config,
  defaultNodeConfig,
  ifs,
  ts,
  tvs,
  vue
};
